<template>
  <div id="bind_bank">
    <div class="step_wrap">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="填写联系方式"></el-step>
        <el-step title="用户资料填写"></el-step>
        <el-step title="绑定结果" :status="status"></el-step>
      </el-steps>
    </div>
    <div class="step_main">
      <div v-if="active == 1" class="step_item_from">
        <div class="item_main">
          <el-form ref="form" label-width="100px" class="infofrom">
            <el-form-item label="联系电话：" required style="margin-bottom: 12px !important">
              <el-input size="small" placeholder="请输入联系电话" v-model.trim="phoneValue" class="phone no_border">
                <el-button @click="getCode" slot="append" class="appendBtn" :disabled="codeTime">
                  {{ !codeTime ? '获取验证码' : timeDown + 's' }}
                </el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="验证码：" required style="margin-bottom: 12px !important">
              <el-input size="small" placeholder="" v-model.trim="codeValue"> </el-input>
            </el-form-item>
            <el-form-item class="tooltip" style="margin-bottom: 16px !important">
              <i class="iconfont icon-tishi"></i>
              <p style="margin-left: 10px">请填写财务人员电话，点击确定，会有专人联系，指导绑定流程。</p>
            </el-form-item>
          </el-form>
        </div>
        <div class="footer">
          <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
          <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
        </div>
      </div>
      <div v-if="active == 2" class="step_item_from">
        <div class="item_main">
          <el-form ref="form" label-width="120px" class="infofrom">
            <el-form-item label="AccountCode：" required style="margin-bottom: 12px !important" class="accountCode">
              <el-input size="small" placeholder="" v-model.trim="bankFrom.accountCode"> </el-input>
              <p>
                <i class="iconfont icon-tishi" style="margin-right: 10px"></i>
                <span> 请将工作人员告知您的code填入。</span>
              </p>
            </el-form-item>
            <el-form-item label="户名：" required style="margin-bottom: 12px !important">
              <el-input size="small" placeholder="" v-model.trim="bankFrom.accountName"> </el-input>
            </el-form-item>
            <el-form-item label="开户银行：" required style="margin-bottom: 12px !important">
              <el-input size="small" placeholder="" v-model.trim="bankFrom.bankName"> </el-input>
            </el-form-item>
            <el-form-item label="银行账号：" required style="margin-bottom: 12px !important">
              <el-input size="small" placeholder="" v-model.trim="bankFrom.bankAccount"> </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="footer">
          <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
          <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
        </div>
      </div>
      <div v-if="active == 3" class="step_item_from">
        <div class="success_main">
          <!-- <el-image style="width: 70px; height: 70px" :src="url"></el-image> -->
          <i class="iconfont icon-duihao" :style="{ color: isSuccess ? '#31bf70' : '#FF0000', fontSize: '70px' }"></i>
          <span class="issuccess">{{ isSuccess ? '绑定成功!' : '绑定失败!' }}</span>
        </div>
        <div class="footer">
          <el-button size="small" class="commonBtn1" @click="subBtn" v-if="isSuccess">关闭</el-button>
          <el-button size="small" class="commonBtn1" @click="Previous" v-if="!isSuccess">上一步</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    state: {
      type: [String, Number]
    },
    id: {
      type: [String, Number]
    }
  },
  computed: {
    status() {
      let success = ''
      if (this.active == 2) {
        success = 'wait  '
      } else if (this.active == 3) {
        success = this.isSuccess ? 'success' : 'error'
      }
      return success
    }
  },
  data() {
    return {
      bankFrom: {
        id: this.id || null,
        accountCode: '',
        accountName: '',
        bankAccount: '',
        bankName: ''
      },
      url: '',
      isSuccess: null,
      phoneValue: '',
      codeValue: null,
      active: 1,
      codeTime: false,
      timeDown: 60,
      timer: null
    }
  },
  watch: {
    timeDown() {
      if (this.timeDown == 0) {
        clearInterval(this.timer)
        this.codeTime = false
        this.timeDown = 60
      }
    }
  },
  mounted() {
    this.active = this.state + 1 || 1
  },
  methods: {
    // 上一步操作
    Previous() {
      this.active--
    },
    // 提交
    subBtn() {
      if (this.active == 1) {
        if (!this.codeValue) {
          this.$message.error('请输入验证码')
          return
        } else {
          this.saveBindAccount()
        }
      } else if (this.active == 2) {
        // 需要校验的字段以及label名称数组
        const array = [
          { key: 'accountCode', value: 'AccountCode码' },
          { key: 'accountName', value: '户名' },
          { key: 'bankName', value: '开户银行' },
          { key: 'bankAccount', value: '银行账号' }
        ]
        let msg = ''
        // 循环数组
        for (let i = 0; i < array.length; i++) {
          // 如果存在空值
          if (!this.bankFrom[array[i].key]) {
            msg = array[i].value
            // 跳出循环
            break
          }
        }
        if (msg) {
          this.$message.error(msg + '不能为空')
          return
        }
        this.saveBank()
      } else {
        if (this.isSuccess) {
          this.$emit('close', 'init')
        }
      }
    },
    closeBtn() {
      this.$emit('close', '')
    },
    // 获取短信验证码
    getCode() {
      if (!this.common.fieldTest('phone', this.phoneValue)) {
        this.$message.error('请填写正确的手机号码')
        return false
      }
      this.codeTime = true
      this.timer = setInterval(() => {
        this.timeDown--
      }, 1000)
      setTimeout(() => {
        this.codeValue = 9527
      }, 5000)
    },
    saveBindAccount() {
      this.$https({
        method: 'post',
        url: '/bankAccount/addPublicBankAccount',
        data: {
          code: this.codeValue,
          phone: this.phoneValue
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.$emit('close', 'init')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    saveBank() {
      this.$https({
        method: 'post',
        url: '/bankAccount/alterPublicBankAccount',
        data: this.bankFrom
      })
        .then(res => {
          if (res.code == 0) {
            this.active++
            this.isSuccess = true
          } else {
            this.isSuccess = false
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
#bind_bank {
  .infofrom {
    /deep/ .el-input__inner {
      width: 280px;
    }
    .phone {
      width: 280px;
      /deep/ .el-input__inner {
        width: 100%;
      }
    }

    .tooltip {
      /deep/.el-form-item__content {
        display: flex;
        width: 280px;
        line-height: 20px;
        color: #fa7355;
      }
    }
    .accountCode {
      color: #fa7355;
      p {
        line-height: 20px;
      }
    }
  }
  /deep/ .el-input-group__append {
    background: #f0f1f2;
    border: 1px solid #d6d6d6;
    color: #333333;
    font-size: 14px;
    border-radius: 0px 5px 5px 0px;
  }
  /deep/.el-button.is-disabled,
  /deep/.el-button.is-disabled:focus,
  /deep/.el-button.is-disabled:hover {
    background: transparent;
    color: #333333;
  }
  .icon-tishi {
    color: #fa7355;
  }
  .success_main {
    padding: 50px 0 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .issuccess {
    margin-top: 30px;
    font-weight: 400;
    color: #333333;
    font-size: 24px;
  }
  .appendBtn {
    width: 100px !important;
  }
  .footer {
    .commonBtn,
    .commonBtn1 {
      width: 130px;
    }
    text-align: center;
    margin-top: 20px;
  }
  .item_main {
    display: flex;
    justify-content: center;
    padding: 60px 0 0;
  }
}
</style>
